<!-- 网点选择弹窗 -->
<template>
  <nut-popup position="bottom" round closeable :style="{ height: '60%' }" v-model:visible="props.addressShow.WDShow">
    <view class="title">网点</view>
    <view class="list">
      <nut-radio-group v-model="radioVal">
        <view class="listItem" v-for="(item, index) in desBranchList" :key="index">
          <nut-radio :label="item.BRANCHCOMPANYNO"></nut-radio>
          <image class="itemImg"
            :src="index == 0 ? require('@/assets/images/index/服务查询/woyaofahuo_img_zitiwangdian.png') : require('@/assets/images/index/服务查询/shixiaojiage_icon_shenghui.png')" />
          <view class="itemMsg">
            <h5>{{ item.COMPANYNAME }}</h5>
            <p>{{ item.LOCAL }}</p>

            <view class="itemLocation">
              <p class="address">距离收货地：{{ filterDistance(item.distance) }}</p>
            </view>

          </view>
          <view class="icon_btn">
            <view @click="callPhone(item.tel)">
              <image class="icon" style="pointer-events: auto" src="@/assets/images/index/服务查询/icon1.png" />
            </view>
            <view @click="getMap(item)">
              <image class="icon" style="pointer-events: auto" src="@/assets/images/index/服务查询/icon2.png" />
            </view>
          </view>
        </view>
      </nut-radio-group>
    </view>
    <view class="bottomBtn">
      <nut-button color="#0966FF" size="large" type="primary" @click="chooseBranch">确&nbsp;&nbsp;定</nut-button>
    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from "vue";
import Taro from "@tarojs/taro";

const props = defineProps<{
  addressShow: {
    WDShow: boolean
  };
  desBranchList: any;
}>();
const emit = defineEmits<{
  (e: "chooseBranch", branchNo: string): void
}>()
const radioVal = ref();
function chooseBranch() {
  emit('chooseBranch', radioVal.value)
}

// 换算公里数
function filterDistance(distance) {
  if (distance && distance > 1000) {
    let kilometers = Math.floor(distance / 1000);
    let meters = distance % 1000;
    distance = (kilometers + meters / 1000).toFixed(2);
  }
  return distance + 'km'
}

// 拨打电话
function callPhone(phone) {
  console.log(phone, 'phron')
  Taro.makePhoneCall({
    phoneNumber: phone //仅为示例，并非真实的电话号码
  }).catch((err) => {
    console.log(err);
  });
}

// 地图导航
function getMap(item) {
  Taro.openLocation({
    latitude: Number(item.point_lat),
    longitude: Number(item.point_lng),
    scale: 18, // 缩放级别，可调整
  })
}

</script>
<style lang="less" scoped>
.title {
  font-size: 32rpx;
  line-height: 100rpx;
  font-weight: 600;
  padding-left: 30rpx;
  height: 100rpx;
}

.list {
  //   margin-top: 100rpx;
  padding: 1rpx 24rpx;
  height: 68%;
  background: rgb(235, 235, 235);
  box-sizing: border-box;

  .nut-radio-group {
    width: 100%;
  }
}

.listItem {
  background: white;
  border-radius: 16rpx;
  margin-top: 12rpx;
  height: 160rpx;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 16rpx #b9b9b9;

  .icon_btn {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .icon {
      width: 64rpx;
      height: 64rpx;
    }
  }


  .itemImg {
    height: 112rpx;
    width: 112rpx;
    background: url("../../../assets/images/index/服务查询/shixiaojiage_icon_shenghui.png") no-repeat;
    border-radius: 8rpx;
    position: relative;
  }

  .itemMsg {
    padding: 0 12rpx;
    flex: 1;


    .itemLocation {
      .address {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }
    }

    h5 {
      font-size: 28rpx;
      line-height: 40rpx;
      width: 300rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    p {
      font-size: 22rpx;
      line-height: 28rpx;
      color: #666666;
      width: 300rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.bottomBtn {
  //   margin-left: -20rpx !important;
  padding: 25rpx;
  width: 750rpx;
  position: fixed;
  bottom: 10rpx;
  height: 120rpx;
  box-sizing: border-box;
}</style>
